<div class="main-content">
    <div class="content-top-bar">
        <nz-radio-group [nzButtonStyle]="'solid'" [(ngModel)]="summaryType"
                        (ngModelChange)="getSummaryData()"
                        style="margin-left: 15px">
            <label nz-radio-button nzValue="year">年计划报送概览</label>
            <label nz-radio-button nzValue="month">月旬计划报送概览</label>
        </nz-radio-group>
    </div>
  
    <div class="card-container" nz-row nzType="flex" *ngIf="summaryType === 'year'">
        <div class="box">
            <nz-card nzTitle="管理处用水计划上报"
                     class="card">
                <div nz-card-grid class="info-content">
                    <p>已报送</p>
                    <p>{{glcFinishedNum}}</p>
                </div>
                <div nz-card-grid class="info-content">
                    <p>未报送</p>
                    <p style="color: #ff0000">{{glcUnfinishedNum}}</p>
                </div>
                <div nz-card-grid class="info-content">
                    <p>报送进度</p>
                    <p>{{glcPercentage ? glcPercentage : '--'}}%</p>
                </div>
                <div nz-card-grid class="pie-content">
                    <div class="chart">
                        <nz-progress [nzPercent]="glcPercentage"
                                     nzType="circle"
                                     [nzWidth]="180"
                                     [nzStrokeWidth]="10"
                                     [nzFormat]="formatPercentage"></nz-progress>
                    </div>
                </div>
                <div nz-card-grid class="detail-content">
                    <nz-table
                        #glcTable
                        nzBordered
                        [nzData]="glcData"
                        [nzFrontPagination]="false"
                        [nzShowPagination]="false"
                        [nzScroll]="{ y: '300px' }"
                        nzSize="small">
                        <thead>
                        <tr>
                            <th>管理处</th>
                            <th nzWidth="130px">报送状态</th>
                            <th nzWidth="100px">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let row of glcTable.data">
                            <td>{{ row.name }}</td>
                            <td [ngClass]="{'green': row.status === 2, 'red': row.status === 1}">{{ row.statusName }}</td>
                            <td>
                                <a class="red">{{row.status === 2 ? '' : '通知'}}</a>
                            </td>
                        </tr>
                        </tbody>
                    </nz-table>
                </div>
            </nz-card>
        </div>
        <div class="box">
            <nz-card nzTitle="市县用水计划上报"
                     class="card">
                <div nz-card-grid class="info-content">
                    <p>已报送</p>
                    <p>{{cityFinishedNum}}</p>
                </div>
                <div nz-card-grid class="info-content">
                    <p>未报送</p>
                    <p style="color: #ff0000">{{cityUnfinishedNum}}</p>
                </div>
                <div nz-card-grid class="info-content">
                    <p>报送进度</p>
                    <p>{{cityPercentage ? cityPercentage : '--'}}%</p>
                </div>
                <div nz-card-grid class="pie-content">
                    <div class="chart">
                        <nz-progress [nzPercent]="cityPercentage"
                                     nzType="circle"
                                     [nzWidth]="180"
                                     [nzStrokeWidth]="10"
                                     [nzFormat]="formatPercentage"></nz-progress>
                    </div>
                </div>
                <div nz-card-grid class="detail-content">
                    <nz-radio-group [nzButtonStyle]="'solid'"
                                    [(ngModel)]="cityVal"
                                    (ngModelChange)="getCityReportDetailData()">
                        <label *ngFor="let city of cityTabs;let idx = index"
                               nz-radio-button
                               [nzValue]="idx">
                            {{city.name}}
                        </label>
                    </nz-radio-group>
                    <nz-table
                        #cityTable
                        nzBordered
                        [nzData]="cityData"
                        nzSize="small">
                        <thead>
                        <tr>
                            <th>区县</th>
                            <th>报送状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let row of cityTable.data">
                            <td>{{ row.name }}</td>
                            <td [ngClass]="{'green': row.status === 2, 'red': row.status === 1}">{{ row.statusName }}</td>
                            <td>
                                <a class="red">{{row.status === 2 ? '' : '通知'}}</a>
                            </td>
                        </tr>
                        </tbody>
                    </nz-table>
  
                </div>
            </nz-card>
        </div>
        <div class="box">
            <nz-card nzTitle="取用水单位计划上报"
                     class="card">
                <div nz-card-grid class="info-content">
                    <p>已报送</p>
                    <p>{{companyFinishedNum}}</p>
                </div>
                <div nz-card-grid class="info-content">
                    <p>未报送</p>
                    <p style="color: #ff0000">{{companyUnfinishedNum}}</p>
                </div>
                <div nz-card-grid class="info-content">
                    <p>报送进度</p>
                    <p>{{companyPercentage ? companyPercentage : '--'}}%</p>
                </div>
                <div nz-card-grid class="pie-content">
                    <div class="chart">
                        <nz-progress [nzPercent]="companyPercentage"
                                     nzType="circle"
                                     [nzWidth]="180"
                                     [nzStrokeWidth]="10"
                                     [nzFormat]="formatPercentage"></nz-progress>
                    </div>
                </div>
                <div nz-card-grid class="detail-content">
                    <nz-table
                        #companyTable
                        nzBordered
                        [nzData]="companyData"
                        nzSize="small">
                        <thead>
                        <tr>
                            <th>取用水单位</th>
                            <th>报送状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let row of companyTable.data">
                            <td>{{ row.name }}</td>
                            <td [ngClass]="{'green': row.status === 2, 'red': row.status === 1}">{{ row.statusName }}</td>
                            <td>
                                <a class="red">{{row.status === 2 ? '' : '通知'}}</a>
                            </td>
                        </tr>
                        </tbody>
                    </nz-table>
                </div>
            </nz-card>
  
        </div>
    </div>
  
    <div class="card-container month-container" nz-row nzType="flex" *ngIf="summaryType === 'month'">
        <div class="box column-box">
            <nz-card nzTitle="管理处月旬计划上报"
                     class="card">
                <div nz-card-grid>
                    <div nz-row nzType="flex">
                        <div class="info-content" nz-col [nzSpan]="8">
                            <p>已报送</p>
                            <p>{{glcFinishedNum}}</p>
                        </div>
                        <div class="info-content" nz-col [nzSpan]="8">
                            <p>未报送</p>
                            <p style="color: #ff0000">{{glcUnfinishedNum}}</p>
                        </div>
                        <div class="info-content" nz-col [nzSpan]="8">
                            <p>报送进度</p>
                            <p>{{glcPercentage ? glcPercentage : '--'}}%</p>
                        </div>
                    </div>
  
                    <div class="pie-content">
                        <div class="chart">
                            <nz-progress [nzPercent]="glcPercentage"
                                         nzType="circle"
                                         [nzWidth]="180"
                                         [nzStrokeWidth]="10"
                                         [nzFormat]="formatPercentage"></nz-progress>
                        </div>
                    </div>
                </div>
  
                <div nz-card-grid class="month-table-content">
                    <nz-table
                        #glcTable
                        nzBordered
                        [nzData]="glcMonthData"
                        [nzFrontPagination]="false"
                        [nzShowPagination]="false"
                        nzSize="small">
                        <thead>
                        <tr>
                            <th>管理处</th>
                            <th nzWidth="130px">报送状态</th>
                            <th nzWidth="100px">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let row of glcTable.data">
                            <td>{{ row.name }}</td>
                            <td [ngClass]="{'green': row.status === 2, 'red': row.status === 1}">{{ row.statusName }}</td>
                            <td>
                                <a class="red">{{row.status === 2 ? '' : '通知'}}</a>
                            </td>
                        </tr>
                        </tbody>
                    </nz-table>
                </div>
                <div nz-card-grid class="month-table-content">
                    <nz-table
                        #glcTable
                        nzBordered
                        [nzData]="glcMonthData"
                        [nzFrontPagination]="false"
                        [nzShowPagination]="false"
                        nzSize="small">
                        <thead>
                        <tr>
                            <th>管理处</th>
                            <th nzWidth="130px">报送状态</th>
                            <th nzWidth="100px">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let row of glcTable.data">
                            <td>{{ row.name }}</td>
                            <td [ngClass]="{'green': row.status === 2, 'red': row.status === 1}">{{ row.statusName }}</td>
                            <td>
                                <a class="red">{{row.status === 2 ? '' : '通知'}}</a>
                            </td>
                        </tr>
                        </tbody>
                    </nz-table>
                </div>
            </nz-card>
        </div>
        <div class="box column-box">
            <nz-card nzTitle="工业用水单位月计划上报"
                     class="card">
                <div nz-card-grid class="month-table-content">
                    <div nz-row nzType="flex">
                        <div class="info-content" nz-col [nzSpan]="8">
                            <p>已报送</p>
                            <p>{{glcFinishedNum}}</p>
                        </div>
                        <div class="info-content" nz-col [nzSpan]="8">
                            <p>未报送</p>
                            <p style="color: #ff0000">{{glcUnfinishedNum}}</p>
                        </div>
                        <div class="info-content" nz-col [nzSpan]="8">
                            <p>报送进度</p>
                            <p>{{glcPercentage ? glcPercentage : '--'}}%</p>
                        </div>
                    </div>
  
                    <div class="pie-content">
                        <div class="chart">
                            <nz-progress [nzPercent]="glcPercentage"
                                         nzType="circle"
                                         [nzWidth]="180"
                                         [nzStrokeWidth]="10"
                                         [nzFormat]="formatPercentage"></nz-progress>
                        </div>
                    </div>
                </div>
  
                <div nz-card-grid class="month-table-content">
                    <nz-table
                        #monthIndusTable
                        nzBordered
                        [nzData]="companyData"
                        [nzFrontPagination]="false"
                        [nzShowPagination]="false"
                        nzSize="small">
                        <thead>
                        <tr>
                            <th>管理处</th>
                            <th nzWidth="130px">报送状态</th>
                            <th nzWidth="100px">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let row of monthIndusTable.data">
                            <td>{{ row.name }}</td>
                            <td [ngClass]="{'green': row.status === 2, 'red': row.status === 1}">{{ row.statusName }}</td>
                            <td>
                                <a class="red">{{row.status === 2 ? '' : '通知'}}</a>
                            </td>
                        </tr>
                        </tbody>
                    </nz-table>
                </div>
                <div nz-card-grid class="month-table-content">
                    <nz-table
                        #monthIndusTable
                        nzBordered
                        [nzData]="companyData"
                        [nzFrontPagination]="false"
                        [nzShowPagination]="false"
                        nzSize="small">
                        <thead>
                        <tr>
                            <th>管理处</th>
                            <th nzWidth="130px">报送状态</th>
                            <th nzWidth="100px">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let row of monthIndusTable.data">
                            <td>{{ row.name }}</td>
                            <td [ngClass]="{'green': row.status === 2, 'red': row.status === 1}">{{ row.statusName }}</td>
                            <td>
                                <a class="red">{{row.status === 2 ? '' : '通知'}}</a>
                            </td>
                        </tr>
                        </tbody>
                    </nz-table>
                </div>
            </nz-card>
        </div>
    </div>
  
  </div>